<template>
  <div class="updateBind">
    <div class="title">
      <h3 style="font-weight: bold">
        <em>招标项目编辑</em>
      </h3>
      <hr />
      <el-row class="display-box">
        <el-col :span="4" class="headcol"><em>招标项目编号</em></el-col>
        <el-col :span="8" class="headcols">
          <el-input
            value="系统自动生成"
            readonly
            style="margin-left: 5px"
          ></el-input>
        </el-col>

        <el-col :span="4" class="headcol"><em>招标项目名称</em></el-col>
        <el-col :span="8" class="headcols">
          <el-input
            v-model="bind.bindName"
            readonly
            style="margin-left: 5px"
          ></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="headcol"><em>招标方式</em></el-col>
        <el-col :span="8" class="headcols">
          <div>
            <dict-tag
              class="dict-box"
              :options="dict.type.pur_methods"
              :value="bind.bindMethod"
            />
          </div>
        </el-col>
        <el-col :span="4" class="headcol"><em>是否必招</em></el-col>
        <el-col :span="8" class="headcols">
          <el-radio v-model="bind.isMust" label="1" style="margin-left: 20px"
            >依法必招</el-radio
          >
          <el-radio v-model="bind.isMust" label="2">自主招标</el-radio>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="headcol"><em>资格审查方式</em></el-col>
        <el-col :span="8" class="headcols">
          <el-radio
            v-model="bind.examMethod"
            label="1"
            style="margin-left: 20px"
            >资格预审</el-radio
          >
          <el-radio v-model="bind.examMethod" label="2">资格后审</el-radio>
        </el-col>
        <el-col :span="4" class="headcol">业务类型</el-col>
        <el-col :span="8" class="headcols">
          <dict-tag
            style="margin-left: 15px"
            :options="dict.type.business_type"
            :value="bind.busiType"
          />
        </el-col>
      </el-row>
      <el-row class="display-box">
        <el-col :span="4" class="headcol"><em>招标单位</em></el-col>
        <el-col :span="8" class="headcols">
          <el-input v-model="bind.bindUnit" style="margin-left: 5px"></el-input>
        </el-col>
        <el-col :span="4" class="headcol"><em>联系人</em></el-col>
        <el-col :span="8" class="headcols">
          <el-input
            v-model="bind.bindPerson"
            style="margin-left: 5px"
          ></el-input>
        </el-col>
      </el-row>
      <el-row class="display-box">
        <el-col :span="4" class="headcol"><em>电话</em></el-col>
        <el-col :span="8" class="headcols">
          <el-input v-model="bind.phone" style="margin-left: 5px"></el-input>
        </el-col>
        <el-col :span="4" class="headcol"><em>邮箱</em></el-col>
        <el-col :span="8" class="headcols">
          <el-input v-model="bind.email" style="margin-left: 5px"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="headcol"><em>地址</em></el-col>
        <el-col :span="20" class="headcols"
          ><span class="map-box">省: </span>
          <span class="map">
            <el-select
              style="width: 160px"
              v-model="province"
              class="bordered-select"
              @change="changeCityList"
            >
              <el-option
                v-for="(item, index) in mapData"
                :key="index"
                :value="item"
              >
                {{ item.n }}
              </el-option>
            </el-select>
            <span class="map-box">市: </span>
            <el-select
              v-model="city"
              @change="changeAreaList"
              style="width: 160px"
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :value="item"
              >
                {{ item.n }}
              </el-option>
            </el-select>
            <span class="map-box">区: </span>
            <el-select v-model="area" style="width: 160px">
              <el-option
                v-for="(item, index) in areaList"
                :key="index"
                :value="item.n"
              >
                {{ item.n }}
              </el-option>
            </el-select>
          </span>
        </el-col>
      </el-row>
      <el-row class="display-box">
        <el-col :span="4" class="headcol"><em>地址详情</em></el-col>
        <el-col :span="20" class="headcols">
          <el-input v-model="addr"></el-input>
        </el-col>
      </el-row>
      <el-row class="display-box">
        <el-col :span="4" class="headcol"><em>相关附件</em></el-col>
        <el-col :span="20" class="headcols" style="position: relative">
          <FileUpload
            :syncedMessage.sync="fileInfo"
            style="margin-left: 10px"
          ></FileUpload>
        </el-col>
      </el-row>
    </div>
    <div class="budGetInfos-box">
      <div style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
        <em>预算信息</em>
      </div>
      <el-table :data="budgetList" border>
        <el-table-column label="预算编号" align="center" prop="bgId" />
        <el-table-column label="部门名称" align="center" prop="createPost" />
        <el-table-column
          label="预算名称"
          align="center"
          prop="bgName"
          width="170px"
        />

        <el-table-column label="总金额" align="center" prop="totalAmount" />

        <el-table-column label="已使用金额" align="center" prop="useMoney" />
        <el-table-column label="剩余金额" align="center" prop="surpMoney" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="budGetqueryParams.pageNum"
        :limit.sync="budGetqueryParams.pageSize"
        @pagination="getBudGetList"
      />
    </div>

    <div class="planInfos-box">
      <div style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
        <em>产品明细</em>
      </div>
      <el-table :data="planInfoList" style="width: 100%" border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="税率">
                <span>{{ props.row.taxRate + "%" }}</span>
              </el-form-item>
              <el-form-item label="预算总价">
                <span>{{ props.row.bdgTotlePrice + "元" }}</span>
              </el-form-item>
              <el-form-item label="交付时间">
                <span>{{ props.row.delvTime }}</span>
              </el-form-item>
              <el-form-item label="需求说明">
                <span>{{ props.row.prodExplain }}</span>
              </el-form-item>
              <el-form-item label="采购人">
                <span>{{ props.row.purchaser }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="预算编号"
          align="center"
          prop="bgId"
          width="200"
        />
        <el-table-column
          label="产品编号"
          align="center"
          prop="prodId"
          width="200"
        />
        <el-table-column
          label="产品名称"
          align="center"
          prop="prodName"
          width="200"
        />
        <el-table-column label="规格" align="center" prop="size" width="150" />
        <el-table-column
          label="预算单价"
          align="center"
          prop="bdgSinglePrice"
          width="140"
        />
        <el-table-column label="需求数量" align="center" prop="reqNumber" />
      </el-table>
      <pagination
        v-show="planInfoTotal > 0"
        :total="planInfoTotal"
        :page.sync="planInfoqueryParams.pageNum"
        :limit.sync="planInfoqueryParams.pageSize"
        @pagination="getPlanInfoList"
      />
    </div>
    <div class="submit-box">
      <el-button
        type="primary"
        style="margin-left: 930px; margin-top: 20px"
        @click="submitBind"
        >提 交</el-button
      >
      <el-button type="info" @click="back">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { updateBind } from "@/api/purs/bind";
import { getPlanDetails, deleteFile, getPurCode } from "@/api/purs/purs";
import { budList, listBudget } from "@/api/budget/budget";
import { getPlanInfoListByBindCode } from "@/api/purs/planInfo";
import {
  addBindFiles,
  delBindFiles,
  delBindFilesByFileName,
} from "@/api/purs/bindFiles";
import axios from "axios";
export default {
  dicts: ["pur_methods", "pur_bind_status", "business_type"],
  data() {
    return {
      fileInfo: {},
      addr: "",
      //省份
      province: "",
      //市
      cityList: [],
      city: "",
      //区
      areaList: [],
      area: "",
      bindCode: "",
      bind: {},
      budgetList: [],
      planInfoList: [],
      planInfoTotal: 1,
      mapData: [],
      total: 1,
      budGetqueryParams: {
        pageNum: 1,
        pageSize: 10,
        planCode: null,
      },
      planInfoqueryParams: {
        pageNum: 1,
        pageSize: 10,
        planCode: null,
      },
      bindFile: {},
      uploadFlag: true,
    };
  },
  components: {},
  watch: {
    fileInfo: {
      handler(value) {
        console.log("value:" + JSON.stringify(value));
        if (value.code == 1) {
          this.bindFile.fileName = value.fileName;
          this.bindFile.filePath = value.filePath;
          this.bindFile.type =1;
          this.bindFile.fileSize = parseFloat(value.fileSize / 1000);
          this.bindFile.creater = sessionStorage.getItem("userName");
          this.bindFile.bindCode = this.bindCode;
          addBindFiles(this.bindFile).then((res) => {
            if (res.code == 200) {
              this.uploadFlag = false;
              this.$modal.msgSuccess("上传成功");
            }
          });

    
        } else {
          deleteFile(this.bindFile.fileName).then();
          delBindFilesByFileName(this.bindFile.fileName).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("删除成功");
            }
          });
        }
      },
    },
  },
  created() {
    this.bind = this.$route.query.bind;
    this.fileInfo.id = this.bind.bindCode;
    this.bindCode = this.$route.query.bind.bindCode;
    this.bindFile.bindCode = this.bindCode;
    this.init();

    this.budGetqueryParams.planCode = this.bindCode;
    if (this.bindCode != null) {
      this.getBindDetails();
    }
  },
  mounted() {},
  methods: {
    back() {
      this.$router.back();
    },

    submitBind() {
      if (this.area != "") {
        this.bind.binderAddr =
          this.province +
          "省" +
          this.city +
          "市" +
          this.area +
          "区" +
          this.addr;
      } else {
        this.bind.binderAddr =
          this.province + "省" + this.city + "市" + this.addr;
      }
      this.bind.bindHeader = this.bind.bindPerson;
      this.bind.status = 2;
      updateBind(this.bind).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("提交成功");
          this.$router.push("/bind/bind");
        }
      });
    },

    changeCityList(value) {
      this.city = "";
      this.area = "";
      this.province = value.n;
      this.cityList = value.c;
    },
    changeAreaList(value) {
      this.area = "";
      this.city = value.n;
      this.areaList = value.c;
    },

    init() {
      axios.get("/area.json").then((response) => {
        this.mapData = response.data;
      });
    },
    getPlanInfoList() {
      getPlanInfoListByBindCode(this.bindCode).then((res) => {
        this.planInfoTotal = res.total;
        this.planInfoList = res.rows;
      });
    },

    getBudGetList() {
      listBudget(this.budGetqueryParams).then((res) => {
        this.budgetList = res.rows;
        this.total = res.total;
      });
    },

    getBindDetails() {
      getPlanDetails(this.bindCode).then((res) => {
        this.budgetList = res.data.purProdBudget;
        this.planInfoList = [];
        res.data.purProdBudget.forEach((res) => {
          res.purProdInfos.forEach((item) => {
            this.planInfoList.push(item);
          });
        });
      });
    },
  },
};
</script>

<style scope>
.updateBind {
  overflow: auto;
}
.title {
  width: 90%;
  margin: 0 auto;
}

.headcol {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  background-color: #f2f2f2;
  color: rgb(133, 125, 125);
  text-align: center;
}

.headcols {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border: 1px solid #f3f3f3;
  font-weight: bold;

  font-style: italic;
}

.display-box .el-input input {
  border: none;
  outline: none;
  box-shadow: none;
}
.updateBind .el-input__inner {
  background-color: inherit; /* 继承父级背景色，或设置成你需要的颜色 */
  color: black;
}

.el-radio {
  color: black;
}

.tilte-style {
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
}

.budGetInfos-box {
  width: 1100px;
  margin: 120px auto;
}

.planInfos-box {
  width: 1100px;
  margin: 60px auto;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 20px;
  width: 50%;
}

.submit-box {
  width: 1100px;
  height: 100px;
  margin: 20px auto;
}

.dict-box {
  background-color: inherit; /* 继承父级背景色，或设置成你需要的颜色 */
  font-family: "仿宋";
  font-weight: bold;
  margin-left: 15px;
  font-size: 14px;
}

.el-select-dropdown {
  border: 1px solid #48e3ff;
}

.map-box {
  font-family: "仿宋";
  font-weight: bold;
  font-size: 15px;
  margin-left: 15px;
}
</style>